<template>
    <el-container style="height: 100%">
        <el-header style="position: fixed;z-index: 9;width: 100%">
            <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
                用户管理
            </h1>
        </el-header>
        <el-main style="background: #F0F0F066;margin-top:45px">
            <el-row>
                <el-col :span="24">
                    <el-row :gutter="10">
                        <el-card>
                            <el-row>
                                <el-col :span="10">
                                    <el-card>
                                        <el-col :span="7">
                                            <h1 style="font-size: 1.4em">管理员列表</h1>
                                        </el-col>
                                        <el-col :span="5">
                                            <el-button class="el-button--primary el-button--mini"
                                                       @click="dialogVisible1 = true">
                                                新增管理员账号
                                            </el-button>
                                        </el-col>
                                        <user-table :table-data="tableData1" @updateData="updateData1"
                                                    :cur-page="curPage1"/>
                                        <admin-page :page-size="pageSize1" ref="adminPage1" @updateData="updateData1"
                                                    :total="total1" @currentChange="currentChange1"/>
                                    </el-card>
                                </el-col>
                                <el-col :span="14">
                                    <el-card>
                                        <el-col :span="5">
                                            <h1 style="font-size: 1.4em">调查员列表</h1>
                                        </el-col>
                                        <el-col :span="5">
                                            <el-button class="el-button--primary el-button--mini"
                                                       @click="dialogVisible2 = true">
                                                新增调查员账号
                                            </el-button>
                                        </el-col>
                                        <users-table :table-data="tableData2" @updateData="updateData2"
                                                     :cur-page="curPage2"/>
                                        <admin-page :page-size="pageSize2" ref="adminPage2" @updateData="updateData2"
                                                    :total="total2" @currentChange="currentChange2"/>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <el-dialog
                    title="新增管理员账号"
                    :visible.sync="dialogVisible1"
                    width="48%"
                    v-if="dialogVisible1"
                    :before-close="handleClose">
                <new-user ref="newUser"
                          @updateData1="updateData1"></new-user>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm1" v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
                </span>
            </el-dialog>
            <el-dialog
                    title="新增调查员账号"
                    :visible.sync="dialogVisible2"
                    width="48%"
                    v-if="dialogVisible2"
                    :before-close="handleClose">
                <new-users ref="newUsers"
                           @updateData2="updateData2"></new-users>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">
                        取 消
                    </el-button>
                    <el-button type="primary" @click="submitForm2" v-loading.fullscreen.lock="fullscreenLoading">
                        保 存
                    </el-button>
                </span>
            </el-dialog>
        </el-footer>
    </el-container>
</template>

<script>
    import UserTable from "../../../components/admin/table/UserTable";
    import UsersTable from "../../../components/admin/table/UsersTable";
    import AdminPage from "../../../components/admin/menu/AdminPage";
    import NewUser from "../../../components/admin/form/NewUser";
    import NewUsers from "../../../components/admin/form/NewUsers";
    import qs from "qs";

    export default {
        name: "Main",
        components: {
            UserTable,
            UsersTable,
            AdminPage,
            NewUser,
            NewUsers
        },
        data() {
            return {
                tableData1: [],
                tableData2: [],
                beginPos1: '',
                beginPos2: '',
                curPage1: 1,
                curPage2: 1,
                pageSize1: 10,
                pageSize2: 10,
                total1: 0,
                total2: 0,
                dialogVisible1: false,
                dialogVisible2: false
            }
        },
        mounted() {
            this.updateData1(this.curPage1);
            this.updateData2(this.curPage2);
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            submitForm1() {
                this.$refs.newUser.submitForm();
                this.fullscreenLoading = true;
            },
            submitForm2() {
                this.$refs.newUsers.submitForm();
                this.fullscreenLoading = true;
            },
            to(path) {
                this.$router.push({name: path});
            },
            currentChange1(curpage) {
                this.updateData1(curpage, this.state);
            },
            currentChange2(curpage) {
                this.updateData(curpage, this.state);
            },
            updateData1(curPage) {
                this.pageSize1 = this.$refs.adminPage1.pageSize;
                this.curPage = curPage === undefined ? this.curPage : curPage;
                axios.get("/bjdzms/user/findAllByPage",
                    {
                        params: {
                            'page': this.curPage1,
                            'rows': this.pageSize1,
                        }
                    }).then(res => {
                    this.tableData1 = [];
                    this.tableData1 = res.data.rows;
                    this.beginPos1 = res.data.beginPos;
                    this.curPage1 = res.data.curPage;
                    this.total1 = res.data.total;
                });
                this.dialogVisible1 = false;
                this.fullscreenLoading = false;
            },
            updateData2(curPage) {
                this.pageSize2 = this.$refs.adminPage2.pageSize;
                this.curPage = curPage === undefined ? this.curPage : curPage;
                axios.get("/bjdzms/users/findAllByPage",
                    {
                        params: {
                            'page': this.curPage2,
                            'rows': this.pageSize2,
                        }
                    }).then(res => {
                    this.tableData2 = [];
                    this.tableData2 = res.data.rows;
                    this.beginPos2 = res.data.beginPos;
                    this.curPage2 = res.data.curPage;
                    this.total2 = res.data.total;
                });
                this.dialogVisible2 = false;
                this.fullscreenLoading = false;
            }
        }
    }
</script>

<style>

    .el-footer {
        height: 0 !important;
    }

</style>

<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .title {
        font-size: 14px;
        color: #97a8be;
        font-weight: 400 !important;
    }
</style>
